<template>
    <div class="row">
    <div class="col-md-8 col-md-offset-2">
        <form newsSorts="form" @submit.prevent="submit">
            <!-- name -->
            <div class="form-group" :class="{'has-error': errors.has('sort_id')}">
                <label for="sort_id-field">所属分类：</label>
                <select v-model="news.sort_id" v-validate data-vv-rules="required" data-vv-as="所属分类"
                        name="sort_id" id="sort_id-field" class="form-control">
                    <option value="0">-请选择所属分类-</option>
                    <option v-for="item in newsSorts" v-bind:value="item.id">{{ item.sort_name }}</option>
                </select>

                <!-- error msg -->
                <span v-show="errors.has('sort_id')" class="help-block">{{ errors.first('sort_id') }}</span>
            </div>

            <!-- name -->
            <div class="form-group" :class="{'has-error': errors.has('sort_name')}">
                <label for="bridge_id-field">所属桥梁：</label>
                <select name="bridge_id" id="bridge_id-field" class="form-control">
                    <option value="">-请选择所属桥梁-</option>
                    <option v-for="item in bridges" v-bind:value="item.id">{{ item.bridge_name }}</option>
                </select>

                <!-- error msg -->
                <span v-show="errors.has('sort_name')" class="help-block">{{ errors.first('sort_name') }}</span>
            </div>

            <!-- name -->
            <div class="form-group" :class="{'has-error': errors.has('title')}">
                <label for="title-field">标题：</label>
                <input v-model="news.title" v-validate data-vv-rules="required" data-vv-as="标题"
                       type="text" name="title" id="title-field" class="form-control">

                <!-- error msg -->
                <span v-show="errors.has('title')" class="help-block">{{ errors.first('title') }}</span>
            </div>

            <!-- name -->
            <div class="form-group" :class="{'has-error': errors.has('author')}">
                <label for="author-field">作者：</label>
                <input v-model="news.author" v-validate data-vv-rules="required" data-vv-as="作者"
                       type="text" name="author" id="author-field" class="form-control">

                <!-- error msg -->
                <span v-show="errors.has('author')" class="help-block">{{ errors.first('author') }}</span>
            </div>

            <!-- name -->
            <div class="form-group" :class="{'has-error': errors.has('image')}">
                <label for="image-field">图片：</label>
                <br>
                <button id="image-field" class="btn btn-default" type="button">选择文件</button>
                <br>
                <img v-bind:src="news.image" alt="" v-show="news.image" class="margin-top-10 thumbnail" width="171" height="180">

                <!-- error msg -->
                <span v-show="errors.has('image')" class="help-block">{{ errors.first('image') }}</span>
            </div>

            <!-- name -->
            <div class="form-group" :class="{'has-error': errors.has('content')}">
                <label for="content-field">内容：</label>
                <textarea v-model="news.content"
                          name="content" id="content-field" cols="30" rows="10" class="hidden"></textarea>
                <div id="div1"></div>

                <!-- error msg -->
                <span v-show="errors.has('content')" class="help-block">{{ errors.first('content') }}</span>
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-primary">提交</button>
                <button type="button" onclick="window.history.back();" class="btn btn-default">返回</button>
            </div>
        </form>

    </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            // 初始化编辑器
            var E = window.wangEditor
            var editor = new E('#div1')
            editor.customConfig.onchange = (html) => {
                // 监控变化，同步更新到 textarea
                this.news.content = html;
            }

            editor.customConfig.uploadImgServer = '/admin/news/' + this.$route.params.id;
            editor.customConfig.uploadImgHeaders = {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            };
            editor.customConfig.uploadImgParams = {
                // 如果版本 <=v3.1.0 ，属性值会自动进行 encode ，此处无需 encode
                // 如果版本 >=v3.1.1 ，属性值不会自动 encode ，如有需要自己手动 encode
                _method: 'PUT'
            };
            editor.customConfig.uploadFileName = 'news'

            editor.create()
            // 初始化 textarea 的值
            this.news.content = editor.txt.html();

            // 获取分类信息
            this.get('news/' + this.$route.params.id + '/edit').then(response => {
                this.news = response.news;
                this.bridges = response.bridges;
                this.newsSorts = response.newsSorts;

                editor.txt.html(this.news.content)
            });

            //实例化一个plupload上传对象
            var uploader = new plupload.Uploader({
                browse_button : 'image-field', //触发文件选择对话框的按钮，为那个元素id
                url :  '/admin/news', //服务器端的上传页面地址
                file_data_name: 'news',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            //在实例对象上调用init()方法进行初始化
            uploader.init();

            //绑定各种事件，并在事件监听函数中做你想做的事
            uploader.bind('FilesAdded',function(uploader,files){
                uploader.start();
            });
            uploader.bind('FileUploaded',(uploader,file,responseObject) => {
                var response = JSON.parse(responseObject.response);
                this.news.image = response.data[0];
            });
        },
        data(){
            return {
                bridges: [],
                newsSorts: [],
                news: {
                    sort_id: 0,
                    bridge_id: 0,
                    title: '',
                    author: '',
                    image: '',
                    content: '',
                },
            }
        },
        methods: {
            /**
             * 提交表单
             */
            submit(){
                this.$validator.validateAll().then(result => {
                    if(result){
                        let config = {
                            url: 'news/' + this.$route.params.id,
                            type: 'PATCH',
                            data: this.news,
                        };

                        this.ajax(config).then(response => {
                            this.alert('新闻编辑成功！');
                            window.history.back();
                        });
                    }
                });
            },
        },
        computed: {

        },
    }
</script>

